<template>
	<div class="canvasRender-tools">
		<div class="canvasRender-tools__left">
			<el-popover
				v-for="item in toolgroup_left"
				:key="item.id"
				:close-delay="0"
				:open-delay="200"
				:content="item.content"
				placement="top"
				popper-class="topPopver"
				trigger="hover"
			>
				<i
					slot="reference"
					class="iconfont"
					:class="item.active ? 'active' : ''"
					@click="toggleTool(item)"
				>
					{{ item.icon }}
				</i>
			</el-popover>
		</div>
		<div class="canvasRender-tools__right">
			<el-popover
				v-for="item in toolgroup_right"
				:key="item.id"
				:close-delay="0"
				:open-delay="200"
				:content="item.content"
				placement="top"
				popper-class="topPopver"
				trigger="hover"
			>
				<i
					slot="reference"
					class="iconfont"
					:class="disabled ? 'disabled' : ''"
					@click="toggleToolRight(item)"
				>
					{{ item.icon }}
				</i>
			</el-popover>
		</div>
	</div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';

export default {
	name: 'CanvasRenderTools',
	data() {
		return {
			toolgroup_left: [
				{
					id: $xy.RI(),
					icon: '\ue62c',
					content: '平移',
					active: true
				},
				{
					id: $xy.RI(),
					icon: '\ue607',
					content: '旋转',
					active: false
				},
				{
					id: $xy.RI(),
					icon: '\ue660',
					content: '缩放',
					active: false
				}
			] /* 工具栏左侧 */,
			toolgroup_right: [
				{
					id: $xy.RI(),
					icon: '\ue615',
					content: '悬浮物体落地'
				},
				{
					id: $xy.RI(),
					icon: '\ue656',
					content: '复制'
				},
				{
					id: $xy.RI(),
					icon: '\ue6cf',
					content: '隐藏'
				},
				{
					id: $xy.RI(),
					icon: '\ue7b2',
					content: '隐藏摇杆'
				},
				{
					id: $xy.RI(),
					icon: '\ue74b',
					content: '删除'
				}
			] /* 工具栏左侧 */,
			axisVisable: false,
			disabled: true
		};
	},
	computed: {
		...mapGetters('ue4Info', {
			currentData: 'queryCurrentActorData',
			modelIndex: 'queryModelGroupIndex',
			activeIndex: 'queryActiveGroupIndex',
			currentGroup: 'queryCurrentActorGroup'
		})
	},
	created() {
		this.init();
	},
	watch: {
		currentData: {
			handler: function (val) {
				if (val) {
					this.disabled = false;

					if (val.ActorVis) {
						this.toolgroup_right[2].icon = '\ue6cf';
						this.toolgroup_right[2].content = '隐藏';
					} else {
						this.toolgroup_right[2].icon = '\ue60d';
						this.toolgroup_right[2].content = '显示';
					}
				} else {
					this.disabled = true;
				}
			},
			immediate: true
		}
	},
	methods: {
		...mapMutations('ue4Info', {
			clearAllGroup: 'clearAllGroup',
			removeCurrentActor: 'removeCurrentActor',
			setModelIndex: 'setModelGroupIndex',
			setActiveIndex: 'setActiveGroupIndex',
			removeModel: 'removeModelByIndex',
			removeActive: 'removeActiveByIndex'
		}),

		// 初始化
		init() {},

		toggleToolRight(val) {
			if (val.content === '删除') {
				if (this.currentGroup === 'model') {
					this.removeModel();
				} else {
					this.removeActive();
				}
				this.setModelIndex('');
				this.setActiveIndex('');
				$ue4.deleteActor(this.currentData.NameInLevel);
				this.removeCurrentActor();
			} else if (val.content === '隐藏') {
				$ue4.ForNameAixVisible(this.currentData.NameInLevel, false);
				val.content = '显示';
				val.icon = '\ue60d';

				if (this.currentGroup === 'model') {
					this.$store.state.ue4Info.modelGroup.data[this.modelIndex].Data.ActorVis = false;
				} else {
					this.$store.state.ue4Info.activeGroup.data[this.activeIndex].Data.ActorVis = false;
				}
			} else if (val.content === '显示') {
				$ue4.ForNameAixVisible(this.currentData.NameInLevel, true);
				val.content = '隐藏';
				val.icon = '\ue6cf';
				if (this.currentGroup === 'model') {
					this.$store.state.ue4Info.modelGroup.data[this.modelIndex].Data.ActorVis = true;
				} else {
					this.$store.state.ue4Info.activeGroup.data[this.activeIndex].Data.ActorVis = true;
				}
			} else if (val.content === '复制') {
				$ue4.copyActor();
			} else if (val.content === '隐藏摇杆' || val.content === '显示摇杆') {
				$ue4.setAixVis(this.axisVisable);
				this.axisVisable = !this.axisVisable;

				if (val.content === '隐藏摇杆') {
					val.content = '显示摇杆';
				} else {
					val.content = '隐藏摇杆';
				}
			} else if (val.content === '悬浮物体落地') {
				$ue4.attachGround();
			}
		},

		// 工具栏切换
		toggleTool(val) {
			this.toolgroup_left.map((item) => {
				if (val.id === item.id) {
					val.active = !val.active;

					if (val.active) {
						if (val.content === '平移') {
							$ue4.toggleTranslate();
						} else if (val.content === '旋转') {
							$ue4.toggleRotate();
						} else {
							$ue4.toggleScale();
						}
					}
				} else {
					item.active = false;
				}
			});
		}
	}
};
</script>

<style lang="scss">
.canvasRender-tools {
	position: absolute;
	box-shadow: 3px 3px 5px rgba($color: #000000, $alpha: 0.5);
	display: flex;
	z-index: 98;
	align-items: center;
	top: 20px;
	left: 50%;
	background: #1b1b1b;
	color: $--xy-color-light;
	border-radius: 3px;
	transform: translateX(-50%);
	@include xy-stopselect;

	&__left {
		padding: 5px 15px;
		position: relative;

		&::after {
			position: absolute;
			right: 0;
			top: 4px;
			width: 1px;
			background-color: #363636;
			content: '';
			height: 70%;
		}

		i {
			font-size: 18px;
			padding: 4px 6px;
			display: inline-block;
			margin: 0 3px;
		}
	}

	&__right {
		padding: 5px 15px;

		i {
			font-size: 16px;
			padding: 4px 6px;
			display: inline-block;
			margin: 0 3px;
		}
	}

	i {
		cursor: pointer;

		&.active {
			color: #fff;
			background-color: #0b7de0;
			border-radius: 5px;
		}

		&:hover:not(.disabled) {
			color: #fff;
		}

		&.disabled {
			cursor: not-allowed;
			color: #5d5d5d;
		}
	}
}
</style>
